<template>
  <div>
    <div class="toolbar">
      <!--top-->
      <div class="top5">
        <div class="left" @click="handleClick"><i class="iconfont icon-caidanzhankai"></i><span>{{ `${coinPair.stock}/${coinPair.money}` }}</span></div>
        <div class="right">
          <!-- <i class="iconfont icon-shaixuan"></i> -->
          <nuxt-link :to="`/kline?symbol=${coinPair.name}`">
            <img src="~@/assets/images/icons/chart.svg" alt="">
          </nuxt-link>
        </div>
      </div>
    </div>
    <symbol-modal ref="modal"/>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import symbolModal from './SymbolModal'
export default {
  components: { symbolModal },
  computed: {
    ...mapGetters({
      coinPair: 'market/coinPair'
    })
  },
  methods: {
    handleClick () {
      this.$refs.modal.show()
    }
  }
}
</script>
<style scoped>
.toolbar {
  height: 50px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  color: #173e5d;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 999;
  box-sizing: border-box;
}
.flexbox {
  display: flex;
}
.flex-item {
  flex: 1;
}
.right img {
  width: 24px;
  height: 24px;
  padding: 12px 0 12px 24px;
}
</style>
